<template>
  <el-container direction="vertical" class="vertical">
    <el-main class="el-main">
      <div class="data2div" v-if="count1">
        <el-table class="data2table" :row-class-name="tableRowClassName" :data="userquestion" style="width: 100%">
          <el-table-column prop="questionid" label="题目ID" width="70">
          </el-table-column>
          <el-table-column prop="createdAt" label="答题时间" :formatter="({ createdAt }) => TimeYH1(createdAt)" width="120">
          </el-table-column>
          <el-table-column class-name="center" prop="result" label="测试点">
            <template #default="scope">
              <div v-if="Array.isArray(scope.row.resultdataarr)">
                <span :style="{ width: '50px', display: 'inline-block' }"
                  v-for="(v, key) in acgroup(scope.row.resultdataarr)" :key="'a_' + key">
                  <span :class="ALLTYPE[v[0]][1]">{{ v[0] }}</span>
                  <span>:{{ v[1] }}</span>
                </span>
              </div>
              <div v-else>{{ scope.row.resultdata ? scope.row.resultdata : '错误' }}</div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-main>
    <el-footer class="text-right pt-2 pl-3" v-if="count1">
      <el-pagination :page-size="limit" :total="count1" @current-change="change" layout="prev, pager, next"
        :current-page="Math.floor(offset / limit) + 1"></el-pagination>
    </el-footer>
  </el-container>
</template>


<script setup lang="ts">
import Studycodemodel from "../../../mysql_interface/studycodemodel";
import { computed, onMounted, onUnmounted, ref, watch } from "vue";
import { countBy, pairs } from "underscore";
import { useRoute, useRouter, onBeforeRouteUpdate } from "vue-router";
import { asyncselectuserquestion, Iobj } from "../../../api";
import { ALLTYPE } from "@/util/jianchatime";
import { TimeYH1 } from "../../../util/time";


const userquestion = ref<Studycodemodel.Iuserquestion[]>([]);
const route = useRoute();
const router = useRouter();
const roue = computed(() => {
  return route.query;
});
const count1 = ref(0);
const order = computed(() => {
  return roue.value.order || "ID";
});




function acgroup(data?: Array<keyof Studycodemodel.IALLTYPE>) {
  if (Array.isArray(data)) {
    const c = countBy(data, (a) => {
      return a
    })
    return pairs(c)
  }
  return []
}





const height = ref(window.innerHeight - 74);
function onresize(e: UIEvent) {
  height.value = window.innerHeight - 74;
}

window.onresize = onresize;

const offset = computed(() => {
  return Number(roue.value.offset) || 0;
});
const limit = computed(() => {
  return Number(roue.value.limit) || 20;
});
const questionid = ref<number | null>();
const userids = ref<number>(0);

onUnmounted(() => {
  window.onresize = () => { };
});

onBeforeRouteUpdate(() => {
  questionid.value = Number(roue.value.questionid) || null;

  questionbankid.value =
    (roue.value.questionbankid as unknown as number) || undefined;
});

watch(
  () => route.query,
  () => {
    start();
  }
);

const ID = ref<number[]>([])


onMounted(() => {
  questionid.value = Number(roue.value.questionid) || null;
  questionbankid.value =
    Number(roue.value.questionbankid as unknown as number) || undefined;
  if (route.query.userid) {
    userids.value = Number(route.query.userid);
  }
  if (route.query.userquestionid) {
    ID.value = String(route.query.userquestionid).split(',').map(e => Number(e))
  }
  start()
})

const questionbankid = ref<number>();
function tableRowClassName({ rowIndex }: any) {
  if (rowIndex % 2 === 1) {
    return "warning-row";
  } else {
    return "success-row";
  }
}
async function start() {
  const userid = userids.value;
  const formquery: Iobj<Studycodemodel.Iuserquestion> = {
    _limit: limit.value,
    _offset: offset.value,
    _order: 'ID',
    _sortable: 'DESC'
  };
  if (userid) {
    formquery.userid = userid;
  }

  const { rows, count } = await asyncselectuserquestion(
    Object.assign(formquery)
  );
  count1.value = count;
  userquestion.value = rows
}


function change(r: number) {
  router.push({
    query: {
      limit: limit.value,
      order: order.value,
      offset: (r - 1) * limit.value,
      questionid: questionid.value,
      questionbankid: questionbankid.value,
    },
  });
}



</script>

<style scoped>
.data2table {
  --el-table-border: #fff;
  --el-table-header-text-color: var(--color-43);
  --el-table-text-color: var(--color-43);
}


.el-main {
  border: 1px solid #d9d9d9;
  box-sizing: border-box;
  /* Depth 4 */

  box-shadow: 0px 0.3px 0.9px rgba(0, 0, 0, 0.1),
    0px 1.6px 3.6px rgba(0, 0, 0, 0.13);
  border-radius: 4px;
  background: #ffffff;
}

.vertical {
  height: 100%;
}
</style>

<style>
.data2table .cell {
  padding-left: 2px !important;
  padding-right: 2px !important;
  text-align: center;
}

.data2table .el-table__cell {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

.data2table th.is-leaf.el-table__cell {
  border-bottom: 1px solid var(--color-c4) !important;
}
</style>